<template>
  <van-overlay :show="show" @click="clickHandler" class="spin-box">
    <van-loading @click.stop size="46" color="#1989fa" />
  </van-overlay>
</template>

<script>
import { Overlay as vanOverlay, Loading as vanLoading } from 'vant'
export default {
  components: { vanOverlay, vanLoading },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    canClosed: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      show: false
    }
  },
  watch: {
    loading: {
      handler (v) {
        this.show = v
      },
      immediate: true
    }
  },
  methods: {
    clickHandler () {
      if (this.canClosed) {
        this.show = false
      }
    }
  }
}
</script>

<style lang="css" scoped>
.spin-box {
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
